<template>
  <gui-page :custom-header="true" :full-page="true" :status-bar-class="['gui-bg-white']">
    <template #gHeader>
      <view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-bg-white" style="height: 44px">
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <gui-header-leading :home="false" />
        <text class="gui-h5 gui-flex1 gui-text-center gui-ellipsis gui-primary-text">用户信息</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <view style="width: 120rpx" />
      </view>
    </template>
    <template #gBody>
      <view class="gui-bg-white gui-flex gui-flex1 gui-column">
        <view style="padding: 50rpx">
          <view class="gui-flex gui-row gui-justify-content-center">
            <button
              class="gui-button gui-noborder"
              open-type="chooseAvatar"
              style="border-radius: 30rpx"
              type="default"
              @chooseavatar="handleAvatar"
            >
              <gui-image :height="160" mode="aspectFit" :src="avatarUrl" :width="160" />
            </button>
          </view>
          <view style="margin-top: 80rpx">
            <view>
              <text class="gui-text-small gui-color-gray">昵称</text>
            </view>
            <view class="gui-border-b">
              <input v-model="nickName" class="gui-form-input" placeholder="请输入昵称" type="nickname" />
            </view>
          </view>
          <button
            class="gui-button gui-bg-primary gui-noborder"
            style="border-radius: 50rpx; margin-top: 180rpx !important"
            type="default"
            @tap.stop="submit"
          >
            <text class="gui-color-white gui-button-text">确定</text>
          </button>
        </view>
      </view>
    </template>
  </gui-page>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const avatarUrl = ref<string>('/static/logo.svg')
const nickName = ref<string>('')

const handleAvatar = (e: any) => {
  console.log(e)
  avatarUrl.value = e.detail.avatarUrl
  if (e.detail.avatarUrl.indexOf('tmp') !== -1) {
    console.log('上传图片')
  }
}
const submit = () => {
  console.log('确定')
}
</script>
<style scoped>
.login-logo {
  width: 180rpx;
  height: 180rpx;
  font-size: 80rpx;
  text-align: center;
  line-height: 120rpx;
  padding: 30rpx;
  border-radius: 18rpx;
}
.other-login-icons {
  width: 88rpx;
  height: 88rpx;
  text-align: center;
  font-size: 70rpx;
  margin: 20rpx;
}
</style>
